<template>
	<view class="My_vou">
		<view class="volumenumber">
			<text style="color: #333333;font-size: 28rpx;">券码:{{ordernum}}</text>
		</view>
		<view class="volumeimg">
			<image style="width: 500rpx;height: 500rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/code.png" mode=""></image>
		</view>
		
		<view class="like" style="width: 100%;">
			<view class="liketitle">
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/left.png" mode=""></image>
				<text style="color: #FFC30E;font-size: 28rpx;margin-left: 10rpx;margin-right: 10rpx;">你可能还喜欢</text>
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/right.png" mode=""></image>
			</view>
			<view class="likegoods">
				<view class="zy_content">
					<view v-for="item in contentlist" :key="item" class="zy_card">
						<image @tap="touch_card" :data-id="item.id" :src="item.images" :key="item" @click="godetails(item.id)" mode="widthFix"></image>
						<view @tap="touch_card" :data-id="citem.id" class="zy_bottom_view">
							<text class="zy_title">{{item.commodityName}}</text>
							<text class="zy_money">¥ {{item.currentPrice}}</text>
							<text class="zy_old">¥ {{item.originalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},

		props: {
			flowlist: {
				type: Array
			}
		},

		data() {
			return {
				contentlist: [],
				ordernum: '',
			}
		},
		
		onLoad(option) {
			this.orderId = option.derid
			console.log(this.orderId)
			const requestOrdernum = {
				url: `/api/order/selectOrderCode/${this.orderId}`,
				method: "get",
				callBack: (res) => {
					if (res.code == 200) {
						console.log(res.data)
						this.text = 'request success';
						this.ordernum = res.data
					}
				}
			}
			this.$http.request(requestOrdernum)
		},

		methods: {
			
			showcontent() {
				const index = this.contentlist.reduce(function(total, current) {
					return total + current.list.length
				}, 0);
				if (index > this.flowlist.length - 1) {
					this.$emit('flowend')
					return
				};
				const query = uni.createSelectorQuery().in(this);
				let flag = 0;
				query.selectAll('#zy_column_view').boundingClientRect(data => {
					flag = data[0].bottom - data[1].bottom < 0 ? 0 : 1;
					this.contentlist[flag].list.push(this.flowlist[index])
				}).exec()
			},
			//卡片点击事件
			touch_card(e) {
				this.$emit('flowtap', e.currentTarget.dataset.id)
			},
			//初始化
			zyinit() {
				this.contentlist = [{
					list: []
				}, {
					list: []
				}];
				setTimeout(() => {
					this.showcontent();
				}, 0)
			}
		},

		mounted() {
			if (this.flowlist.length) {
				setTimeout(() => {
					this.zyinit()
				}, 200)
			}
		}
	}
</script>

<style>
	.My_vou {
		width: 100%;
		height: 100vh;
		background-color: #F1F1F1;
	}

	.volumenumber {
		padding: 20rpx;
	}

	.volumeimg {
		margin-left: 18%;
		margin-top: 3%;
	}
	
	.like{
		margin-top: 16rpx;
	}

	.liketitle-img {
		width: 48rpx;
		height: 4rpx;
		margin-bottom: 4rpx;
	}

	.liketitle {
		margin-left: 32%;
	}

	.zy_content {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		position: relative;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.zy_list {
		width: 45%;
		display: flex;
		flex-direction: column;
	}
	
	.zy_card {
		width: 344rpx;
		background-color: #fefefe;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 1px 1px 5px gray;
		margin-top: 20rpx;
	}
	
	.zy_card image {
		width: 344rpx;
		height: 352rpx !important;
		margin-bottom: 5rpx;
	}
	
	/* 底部卡片内容 */
	.zy_bottom_view {
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}
	
	.zy_title {
		display: inline-block;
		width: 90%;
		max-height: 70rpx;
		margin-left: 5%;
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #252525;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.zy_money {
		display: block;
		width: 90%;
		margin-left: 5%;
		margin-top: 52rpx;
		color: #f35d3c;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.zy_old {
		display: block;
		width: 90%;
		margin-left: 40%;
		color: #acacac;
		font-size: 20rpx;
		margin-top: -30rpx;
		text-decoration: line-through;
	}
</style>
